<template>
  <div class="welcome">
          <h1>欢迎来到中国青年志愿网——上海海洋大学社会实践平台</h1>
          <div class="zhuce">
              <div class="juese">
                <p>请选择你的注册身份：</p>
                 <el-radio v-model="user" label="student" >学生</el-radio>
                  <el-radio v-model="user" label="teacher">老师</el-radio>
                  <el-radio v-model="user" label="admin">管理员</el-radio>
              </div>
              <div class="info">
                <p>请输入你的用户名：</p>
                <el-input v-model="user_name" placeholder="用户名" style="width:250px"></el-input>
                <p>请输入你的密码：</p>
                <el-input v-model="password" placeholder="密码" style="width:250px"></el-input>
                <p>请输入你的姓名：</p>
                <el-input v-model="name" placeholder="姓名" style="width:250px"></el-input>
                <p>请输入你的电话号码：</p>
                <el-input v-model="phone" placeholder="电话号码" style="width:250px"></el-input>
                <br>
                <el-button type="primary" @click="register">注册</el-button>
                <el-button type="info" @click="back">返回登录</el-button>
              </div>
          </div>
      </div>
</template>

<script>
export default {
  data(){
    return{
      user:'student',
      user_name:'',
      password:'',
      phone:'',
      name:''
      
      
    }
  },
  methods:{
    register(){
      if(this.user=='student'){
        this.$axios.post('/api/student/register',this.$qs.stringify({
          user_name:this.user_name,
          user_password:this.password,
          student_name:this.name,
          phone:this.phone
        })).then(res=>{
          if(res.data=='') this.$message.error('注册失败')
          else{this.$message.success('注册成功')}
        })
      } else if (this.user=='teacher'){
        this.$axios.post('/api/teacher/register',this.$qs.stringify({
          user_name:this.user_name,
          user_password:this.password,
          teacher_name:this.name,
          phone:this.phone
        })).then(res=>{
          if(res.data=='') this.$message.error('注册失败')
          else{this.$message.success('注册成功')}
        })
      } else{
        this.$axios.post('/api/admin/register',this.$qs.stringify({
          user_name:this.user_name,
          user_password:this.password,
          admin_name:this.name,
          phone:this.phone
        })).then(res=>{
          if(res.data=='') this.$message.error('注册失败')
          else{this.$message.success('注册成功')}
        })
      }
      
    },
    back(){
      this.router.go(-1);
    }
  }
}
</script>






<style>
*{
    padding: 0;
    margin: 0;
}
.welcome{
    height: 100%;
    width: 100%;
    background-image: url('../assets/上海海洋大学.png') ;
    background-size:1600px 800px;
}
.zhuce{
    position: relative;
    top:200px;
    padding: 30px;
    position: absolute;
    left: 40%;
    width: 290px;
    height: 400px;
    font-size: 20px;
    background-color: white;
    box-shadow: 0 0 20px white ;
    line-height: 35px;
}
.welcome h1{
    position: relative;
    top:50px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 50px;
    color: rgb(78, 78, 87);
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
</style>